import React from 'react'
import { connect } from 'dva';
import ReactDOM from 'react-dom';
import {
  Input,
  Row,
  Col,
  TreeSelect,
  message,
  Spin,
  Tabs,
  Button,
} from 'antd';
import './Left.scss';
import { noImg } from '../../../utils/request';
import { getCommentConfig, getlistTypePlate, getTypeList, getConfig, getTmData, getMocData } from '../../../services/fetch';
import LeftVideo from './LeftVideo';
import LeftCrawler from './leftCrawler'
import Http from '../../../utils/http'
import classNames from 'classnames';
import img from '../../../assets/head.png';

// import {Encrypt} from '../../../utils/Aes';

const TabPane = Tabs.TabPane;
const TreeNode = TreeSelect.TreeNode;
let mchTabPane;
const CryptoJS = require('crypto-js');  //引用AES源码js

const key = CryptoJS.enc.Utf8.parse("sobey12345678910");  //十六位十六进制数作为密钥
//解密方法
function Decrypt(word) {
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}
//加密方法
function Encrypt(word) {
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
  const base64Cipher = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
  return base64Cipher
}

@connect(({ add }) => ({
  add: add
}))
export default class Left extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      barLoad: true,
      barError: false,
      plateList: [],
      plate_id: 0,
      config_json: {}, //全局配置
      tmData: [], //天马素材
      mocData: [], //moc素材
      tmPage: {
        index: 1
      },
      mocPage: {
        index: 1
      },
      platePage: {
        index: 1
      },
      active: '标题',
      childMenu: [],
      moc_id:'',
      last_page:1
    }
  }

  componentDidMount() {


    window.addEventListener('scroll', this.onScrollCapture);
    this.getTmData()
    this.getMocData()
    const hideConfig = message.loading('全局配置获取中...', 0);

    getConfig().then((res) => { //取全局配置
      if (res.data.code == 200) {
        let { config_json } = res.data.data;
        // console.log(config_json)
        setTimeout(hideConfig, 100);
        this.setState({
          config_json
        })
        this.props.dispatch({
          type: 'add/configJson', data: config_json
        })
        if (config_json.mchSwitch && config_json.mchJs) {
          const hide = message.loading('内容库插件加载中...', 0);
          let sc = document.createElement('script');
          sc.src = config_json.mchJs;//内容库插件地址
          document.querySelector('body').appendChild(sc);
          sc.onload = (e) => {  //加载完后执行初始化方法
            // this.barInit(config_json);
            setTimeout(hide, 100);
          }
          sc.onerror = (e) => {
            message.error('内容库插件加载失败!');
            setTimeout(hide, 100);
            this.setState({
              barLoad: false,
              barError: true
            })
          }
        }
        if (config_json.yqSwitch && window.ZXJS) {
          this.loadYqPlug(); //加载舆情插件
        }
        if (config_json.mchSwitch) {
          mchTabPane = <TabPane tab={this.state.config_json.mchTitle} key="1" >
            <div id="bar-content">
              <div className="example">
                {this.state.barError ? '插件加载失败' : <Spin spinning={this.state.barLoad} />}
              </div>
            </div>
          </TabPane>
        } else {
          mchTabPane = [];
        }
      } else {
        message.error('全局配置加载失败!');
      }
    })

    getlistTypePlate().then((res) => {

      const list = res.data.data;

      let data = [];

      list.map((item, index) => {
        let obj = {
          key: String(index),
          plate_id: item.plate_id,
          title: item.plate_name,
          children: item.children ? item.children : [],
          value: item.plate_id,
          disabled: (item.children && item.children.length > 0) || item.is_other || item.url ? true : false
        };
        //排除版面类型为服务的版面，后端已排除
        // if (item.template_conf.indexOf("news_service") > -1 && obj.children.length==0) {
        //
        // }else{
        if (item.children && item.children.length > 0) {
          item.children.map((i, ins) => {
            let obj2 = {
              key: String(index) + '-' + ins,
              plate_id: i.plate_id,
              title: i.plate_name,
              value: i.plate_id,
              template_id: i.template_id,
            }
            item.children[ins] = obj2
          })
        }
        data[index] = obj
        // }


      })
      // console.log(data);
      this.setState(
        {
          plateList: data
        }
      )
    })

  }
  uploadStyle = () => {

  }
  getJson = (url) => {
    var fetchOptions = {
      method: "GET",
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      },
      mode: 'cors'
    };
    return new Promise((resolve, reject) => {
      fetch(url, fetchOptions).then(function (response) {
        return response.json();
      }).then(function (json) {
        resolve(json);
      })
    });
  }
  getStyle = () => {
    const dataObj = { "category_id": "5cc00a64980be074a6001cbd", "pageNumber": "1", "pageSize": "9999" }
    const signstr = Encrypt(JSON.stringify(dataObj))
    //     Http('http://39.106.49.200:83/v1/cloud/list','post',{signstr:'HmiO/330M5TMY5mDhjauskzS0LVa3cOhuDb3FCDlmza1B8tSXWe/FK1XYeM/ZR9XwAverM0Q6Xeq1Moc2ZuagD+czwwmVtBiXnKUVSe4Pz4='})
    //     .then((res)=>{
    //        if(res.code === 200){
    //         console.log(res.data,'res.data.img_arrres.data.img_arrres.data.img_arrres.data.img_arr')
    //       }
    //        if(res.code === 500){
    //         message.error(res.msg)
    //      }
    //      })
    //     .catch((err)=>{
    //      console.log(err)
    //    })

    this.getJson('http://39.106.49.200:83/v1/cloud/category', 'get', {})
      .then((res) => {
        if (res.code === 200) {
          this.setState({
            childMenu: res.data.childMenu
          })
        }
        if (res.code === 500) {
          message.error(res.msg)
        }
      })
      .catch((err) => {
        console.log(err)
      })
    this.props.dispatch({
      type: 'add/getStyleLibrary',
      data: {
        signstr: signstr,
        mhUrl: this.state.mhUrl
      }
    })
  }

  subjectChange = (id, name) => {
    let dataObj1 = { "category_id": id, "pageNumber": "1", "pageSize": "9999" }
    let signstr1 = Encrypt(JSON.stringify(dataObj1))
    this.setState({
      active: name
    })
    this.props.dispatch({
      type: 'add/setSpin',
      data: true
    })
    this.props.dispatch({
      type: 'add/getStyleLibrary',
      data: {
        signstr: signstr1
      }
    })
  }
  barInit = (config_json) => {
    if (!window.bar) {
      // 初始化内容库插件
      window.bar = window.sBar && window.sBar({
        //插件地址
        requestUrl: config_json.mocSwitch ? '' : config_json.mchHost,
        reqTestUrl: config_json.mocSwitch ? config_json.mchHost : '',
        // 验证token
        token: config_json.mchToken,
        // 站点code
        siteCode: config_json.mchSiteCode,
        // 用户code
        userCode: config_json.mchUserCode,
        //显示功能导航条  公共素材(ggsc)、个人素材(grsc)、关联素材(glsc)
        navCode: ['ggsc'],
        //首次加载默认导航条数据
        activeNavCode: "ggsc",
        // 侧边栏距离顶部间距
        // offsetTop: 40,
        //插件放在传入指定容器中，参数为容器id
        containerId: "bar-content",
        //插件收起状态下是否显示展开按钮, true:显示，false：不显示
        // showBarButton: true,
        //侧边栏是否处于展开状态
        isExpand: true,
        //使用素材时的回调函数，这儿定义后，后面的on监听事件则会无效
        callback: (data) => {
          // console.log(data);
          this.hiveCallback(data);
        }
      }).create();
      this.setState({
        barLoad: false
      })
    }
  }

  getTmData = () => {

    getTmData({ index: this.state.tmPage.index, pageSize: 20 }).then((res) => {
      if (res.data.code == 200) {
        this.setState({
          tmData: res.data.data
        })
      }
    })
  }

  getMocData = () => {

    getMocData({ limit: 10, page: this.state.mocPage.index }).then((res) => {
      if (res.data.code == 200) {
        let mocData = res.data.data.data
        mocData.forEach(item => {
          if (item.content && item.content !== '') {
            item.content = JSON.parse(item.content)
          }
        })
        console.log(mocData, '1111111111111111')
        this.setState({
          mocData,
          last_page:res.data.data.last_page
        })
      }
    })
  }

  click = (item) => {
    this.props.dispatch({
      type: 'add/pushClick',
      data: item
    })
  }
  /**
   * hive插件回调
   */
  hiveCallback = (data) => {
    // console.log(data)
    // switch (data.type) {
    //     case 'biz_sobey_picture':    //图片
    //         if(this.props.add.mchType==='editor'){
    //             window.PubSub.publish('editor',data)
    //         }
    //         break;
    //     case 'biz_sobey_video':     //视频
    //          if (data.streamingUrl == '') {
    //             message.error('当前素材不可用');
    //             return false;
    //         }
    //         if(this.props.add.mchType==='editor'){
    //             window.PubSub.publish('editor',data)
    //         }
    //         break;
    //     case 'biz_sobey_picture':      //文稿
    //         if(this.props.add.mchType==='editor'){
    //             window.PubSub.publish('editor',data)
    //         }
    //         break;
    //     default:
    //         break;
    // }

    if (data.streamingUrl.indexOf('.mpd') > -1) {
      message.error('视频格式为mpd格式，暂不支持！');
      return false;
    }
    console.log(this.props.add.mchType);
    // 文章编辑使用内容库
    if (this.props.add.mchType === 'editor') {
      window.PubSub.publish('editor', data)
      return
    }
    // 右侧上传图片
    if (this.props.add.mchType === 'mchImg') {
      window.PubSub.publish('getFromContent', data)
      return
    }
    // banner图片
    if (this.props.add.mchType === 'bannerImg') {
      window.PubSub.publish('bannerImg', data)
      return
    }
    // 图集图片
    if (this.props.add.mchType === 'imgAll') {
      window.PubSub.publish('imgAll', data)
      return
    }
    // 文章编辑使用内容库
    if (!this.props.add.mchType) {
      message.warning('请选择需要引用内容库的组件')
    }

    // if (data.type == 'biz_sobey_picture') { //图片
    //     //文本框引用 内容库
    // if(this.props.add.mchType==='editor'){
    //     console.log(data.keyFrameUrl)
    //     window.PubSub.publish('editor',data)
    // }
    // } else if (data.type == 'biz_sobey_video') { //视频
    //     if (data.streamingUrl == '') {
    //         message.error('当前素材不可用');
    //         return false;
    //     } else {

    //     }
    // } else {
    //     message.error('请选择正确的素材类型!');
    // }

  }
  treeOnChange = (value) => {

    if (this.state.plate_id != value) {
      this.setState(
        {
          plate_id: value,
          platePage: {
            index: 1
          }
        }
      );
      this.props.dispatch({
        type: 'add/treeOnChange',
        data: {
          plate_id: value,
          index: 1
        }
      });
    } else {
      this.props.dispatch({
        type: 'add/treeOnChange',
        data: {
          plate_id: value,
          index: this.state.platePage.index
        }
      })
    }

  }
  onScrollCapture = (event) => {     //监听滚动条到达指定位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    const _container = document.body.querySelector('._container')
    if (scrollTop > 60) {
      _container.style.position = 'fixed';
      _container.style.top = 0;
    } else {
      _container.style.position = 'relative';
    }
  }

  /**
   * 视频使用回调
   */
  videoCallBack = () => {

  }

  /**
   * 加载舆情插件
   */
  loadYqPlug = () => {
    let yq = new window.ZXJS(function (res) {
      console.log(res);
      let data = {};
      data.type = 1;
      data.information_title = res.title;
      data.information_img = res.img;
      data.content = res.html_content;
      data.key_words = res.keyword;
      data.thumbnail = res.img;
      data.intro = res.summary;
      data.mType = 'information';
      window.PubSub.publish('setFileFabu', data)
    }, '#yqdom');
    yq.init();
  }

  render() {
    const { pushData, pushDataEnd, styleLibrary, spinning } = this.props.add;
    const { active } = this.state

    var newArry = [];

    return (
      <Tabs className="c-tab Left _container" onChange={(key) => {
        if (key == '1') {
          this.barInit(this.state.config_json)
        }
        if (key == '7') {
          this.getStyle()
        }
      }} tabBarStyle={{ width: 320 }}>
        {this.state.config_json.mchSwitch ?
          <TabPane tab={this.state.config_json.mchTitle} key="1" className={this.state.config_json.mchSwitch ? '' : 'none'}>
            <div id="bar-content">
              <div className="example">
                {this.state.barError ? '插件加载失败' : <Spin spinning={this.state.barLoad} />}
              </div>
            </div>
          </TabPane> : ''}
        {/* <TabPane tab="直播库" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="矩阵号" key="3">Content of Tab Pane 3</TabPane> */}
        <TabPane tab="已发布资讯" key="4">
          <div className="pushData">
            <Row gutter={24}>
              <Col span={4}>
                <div className="mon_pushData">
                  <TreeSelect
                    dropdownClassName='mon_tree_select_com'
                    style={{ width: 300, margin: '10px' }}
                    dropdownStyle={{ maxHeight: 400 }}
                    dropdownMatchSelectWidth
                    placeholder="ᠲᠥᠷᠦᠯ ᠵᠦᠢᠯ᠎ᠢᠶᠡᠨ ᠰᠣᠩᠭᠤᠭᠠᠷᠠᠢ"
                    allowClear
                    treeDefaultExpandAll
                    onChange={this.treeOnChange}
                  >
                    {this.state.plateList.map((item) => {
                      let children = item.children ? item.children : [];
                      return (
                        <TreeNode disabled={children.length > 0 ? true : false} value={item.plate_id} title={item.title} key={item.plate_id}>
                          {children.map((item2) => {
                            return <TreeNode value={item2.plate_id} title={item2.title} key={item2.plate_id} />
                          })}
                        </TreeNode>
                      )
                    })}
                  </TreeSelect>
                </div>
              </Col>
              <Col span={20}>
                {pushData.length > 0 ?
                  <div className="pushData">
                    {pushData.map((item) => {
                      let imgList = [];
                      if (item.thumbnail) {
                        imgList = item.thumbnail ? item.thumbnail.split(',') : [];
                      }
                      if (imgList.length > 0) {
                        item.img = imgList[0];
                      } else {
                        item.img = noImg;
                      }

                      return (
                        <div className="item">
                          <img className="i-img" src={item.img ? item.img : ''} />
                          <div className="push-title mon_word">{item.title}</div>
                          <div className="bg">
                            <span className='mon_word' >{item.time}</span>
                            {/* <span className="span">视频</span> */}
                          </div>
                          {/* <div className="action">
                                                <Button size="small" className="mr10" onClick={() => {
                                                    this.props.dispatch({
                                                        type:'add/setData',
                                                        data:item
                                                    })
                                                }}>使用</Button>
                                                <Button size="small" onClick={() => {
                                                    this.click(item)
                                                }}>关联</Button>
                                            </div> */}

                          <div className="action">
                            <Button size="small" className="mr10" onClick={() => {
                              // console.log(item,'361');
                              // item.gltjData = [];
                              let data = {};
                              data.type = item.type;
                              data.img_arr = item.img_arr;

                              data.information_title = item.information_title;
                              data.information_img = item.information_img;
                              data.content = item.content;
                              data.key_words = item.key_words;
                              data.thumbnail = item.information_img;
                              data.intro = item.intro;
                              data.mType = 'information';
                              window.PubSub.publish('setFileFabu', data)
                              localStorage.removeItem('moc_id')
                            }}>使用</Button>
                            <Button size="small" onClick={() => {
                              // console.log(item,'361');
                              this.click(item)
                            }}>关联</Button>
                          </div>
                        </div>
                      )
                    })}
                    <div>
                      <Button style={{ marginLeft: '10px' }} onClick={() => {
                        let { platePage } = this.state
                        if (platePage.index == 1) {
                          message.error('已经是第一页');
                          return;
                        }
                        platePage.index = platePage.index - 1;
                        this.setState({
                          platePage
                        }, () => { this.treeOnChange(this.state.plate_id) })

                      }}>上一页</Button>
                      <Button style={{ marginLeft: '20px' }} onClick={() => {
                        let { platePage } = this.state;
                        if (pushDataEnd == 1) {
                          message.error('已经是最后一页了');
                          return;
                        }
                        platePage.index = platePage.index + 1;
                        this.setState({
                          platePage
                        }, () => { this.treeOnChange(this.state.plate_id) })
                      }}>下一页</Button>
                    </div>
                  </div>
                  // : <div className="note">暂无数据</div>
                  : <div className="note"></div>
                }
              </Col>
            </Row>
          </div>
        </TabPane>
        {this.state.config_json.tmSwitch ?
          <TabPane tab={this.state.config_json.tmTitle} key="5">
            <div className="pushData">
              {this.state.tmData.length > 0 ?
                <div className="pushData">
                  {this.state.tmData.map((item) => {
                    return (
                      <div className="item" >
                        <img className="i-img" src={item.img_url1} />
                        <div className="push-title">{item.title}</div>
                        <div className="bg">
                          <span>{item.collect_time}</span>
                        </div>

                        <div className="action">
                          <Button size="small" className="mr10" onClick={() => {
                            item.type = 1;
                            item.information_title = item.title;
                            item.href = item.url;
                            item.resource = item.website_name;
                            delete item.url;
                            window.PubSub.publish('setFileFabu', item)
                            localStorage.removeItem('moc_id')
                          }}>使用</Button>
                        </div>
                      </div>
                    )
                  })}
                  <Button style={{ marginLeft: '10px' }} onClick={() => {
                    let { tmPage } = this.state
                    if (tmPage.index == 1) {
                      message.error('已经是第一页');
                      return;
                    }
                    tmPage.index = tmPage.index - 1;
                    this.setState({
                      tmPage
                    }, () => { this.getTmData() })

                  }}>上一页</Button>
                  <Button style={{ marginLeft: '20px' }} onClick={() => {
                    let { tmPage } = this.state
                    tmPage.index = tmPage.index + 1;
                    this.setState({
                      tmPage
                    }, () => { this.getTmData() })
                  }}>下一页</Button>
                </div>
                : <div className="note"> 暂无数据</div>}
            </div>
          </TabPane>
          : ''}
        <TabPane tab="已发布视频" key="6">
          <LeftVideo videoCallBack={this.videoCallBack} />
        </TabPane>
        {this.state.config_json.mhSwitch ?
          <TabPane tab="魔盒样式库" key="7" >
            <div className="category">
              <ul>
                <li className={classNames('listUnit', { active: active == '标题' })} onClick={() => { this.subjectChange(this.state.childMenu[0].id, '标题') }}><div className='i' ><svg t="1568620518494" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4128" width="200" height="200"><path d="M116.181404 133.722146 116.181404 441.133425 201.417293 441.133425 201.417293 133.722146 317.598697 133.722146 317.598697 64 0 64 0 133.722146 116.181404 133.722146ZM412.356282 125.799174 412.356282 64 335.263948 64 335.263948 125.799174 412.356282 125.799174ZM335.263948 168.055021 335.263948 441.133425 412.356282 441.133425 412.356282 168.055021 335.263948 168.055021ZM550.003263 168.055021 550.003263 86.184319 472.91093 86.184319 472.91093 168.055021 426.221206 168.055021 426.221206 218.233837 472.91093 218.233837 472.91093 379.33425C472.91093 393.067469 475.263489 404.159517 479.968678 412.610729 484.673868 421.06194 491.098164 427.576318 499.241762 432.154058 507.385359 436.731797 516.795596 439.812922 527.472757 441.397524 538.149917 442.982126 549.4603 443.774415 561.404242 443.774415 569.004932 443.774415 576.786475 443.598351 584.749103 443.246218 592.711731 442.894084 599.950376 442.189827 606.465253 441.133425L606.465253 383.031637C602.845877 383.735905 599.045588 384.264097 595.064275 384.616231 591.082961 384.968365 586.92074 385.144429 582.577488 385.144429 569.547733 385.144429 560.86136 383.031658 556.518108 378.806052 552.174856 374.580447 550.003263 366.129362 550.003263 353.452545L550.003263 218.233837 606.465253 218.233837 606.465253 168.055021 550.003263 168.055021ZM624.673409 64 624.673409 441.133425 701.765741 441.133425 701.765741 64 624.673409 64ZM930.620557 275.279229 805.209786 275.279229C805.571725 269.997222 806.748006 264.011037 808.738662 257.320495 810.729318 250.629953 814.167674 244.291639 819.05383 238.305364 823.939994 232.31909 830.454771 227.301258 838.598368 223.25172 846.741965 219.20218 856.966547 217.177441 869.272429 217.177441 888.09319 217.177441 902.118061 222.107241 911.347469 231.966988 920.576883 241.826734 927.001178 256.264004 930.620557 275.279229L930.620557 275.279229ZM805.209786 322.817057 1007.71289 322.817057C1009.16064 301.689028 1007.350976 281.441637 1002.283853 262.074278 997.216723 242.706918 988.982765 225.45262 977.581728 210.310867 966.180691 195.169113 951.612922 183.10871 933.877978 174.129299 916.143034 165.149886 895.33193 160.660248 871.444045 160.660248 850.089722 160.660248 830.635866 164.357597 813.081888 171.752407 795.527917 179.147217 780.417248 189.270913 767.749427 202.123796 755.081613 214.97668 745.30944 230.206239 738.432627 247.81293 731.555808 265.41962 728.117453 284.434561 728.117453 304.858322 728.117453 325.986351 731.465325 345.35342 738.161171 362.96011 744.857018 380.566801 754.357741 395.708327 766.663622 408.385144 778.969498 421.061962 793.98969 430.833528 811.724634 437.700138 829.459578 444.566747 849.36585 448 871.444045 448 903.29456 448 930.439475 440.957429 952.87961 426.872077 975.319744 412.786724 991.968627 389.370177 1002.826752 356.621733L934.963782 356.621733C932.430221 365.072945 925.55351 373.083869 914.33344 380.654746 903.113376 388.225622 889.721882 392.011004 874.158566 392.011004 852.442304 392.011004 835.793421 386.553012 824.211418 375.636864 812.629414 364.720716 806.295597 347.114289 805.209786 322.817057ZM0 576 1024 576 1024 640 0 640 0 576ZM0 768 1024 768 1024 832 0 832 0 768ZM0 960 768 960 768 1024 0 1024 0 960Z" p-id="4129"></path></svg></div><a style={{ color: 'black' }}>标题</a></li>
                <li className={classNames('listUnit', { active: active == '图文' })} onClick={() => { this.subjectChange(this.state.childMenu[2].id, '图文') }}><div className='i'><svg t="1568620518494" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4302" width="200" height="200"><path d="M641.1 882.5h47.4V721.6h48.1v160.8h56.2V686.2H654.1v-44.5h294.7v44.5H841.9v71.1h95.5v44.2h-95.5v80.9h117.6V927H641.1v-44.5z" p-id="4303"></path><path d="M575.3 896h-415c-17.6 0-31.9-14.3-31.9-32V160c0-17.7 14.3-32 31.9-32h383.1v160c0 35.3 28.6 64 63.8 64h159.6v192c0 17.7 14.3 32 31.9 32 17.6 0 31.9-14.3 31.9-32V270.2c0-8.5-3.3-16.6-9.3-22.6L648.5 73.4c-6-6-14.1-9.4-22.6-9.4H128.4c-35.3 0-63.8 28.7-63.8 64v768c0 35.3 28.6 64 63.8 64h446.9c17.6 0 31.9-14.3 31.9-32s-14.3-32-31.9-32zM639.1 288c-17.6 0-31.9-14.3-31.9-32V128l159.6 160H639.1z" p-id="4304"></path><path d="M543.4 672H223.1c-17.6 0-31.9 14.3-31.9 32s14.3 32 31.9 32h320.2c17.6 0 31.9-14.3 31.9-32 0.1-17.7-14.2-32-31.8-32zM606.2 480H223.1c-17.6 0-31.9 14.3-31.9 32s14.3 32 31.9 32h383.1c17.6 0 31.9-14.3 31.9-32s-14.3-32-31.9-32zM223.1 352h191.5c17.6 0 31.9-14.3 31.9-32s-14.3-32-31.9-32H223.1c-17.6 0-31.9 14.3-31.9 32s14.3 32 31.9 32z" p-id="4305"></path></svg></div><a style={{ color: 'black' }}>正文</a></li>
                <li className={classNames('listUnit', { active: active == '正文' })} onClick={() => { this.subjectChange(this.state.childMenu[1].id, '正文') }}><div className='i'><svg t="1568948069335" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2413" width="200" height="200"><path d="M259.072 303.104q30.72 0 52.736 22.016t22.016 53.76q0 30.72-22.016 52.736t-52.736 22.016q-31.744 0-53.248-22.016t-21.504-52.736q0-31.744 21.504-53.76t53.248-22.016zM864.256 57.344q43.008 0 69.12 28.672t26.112 65.536l0 550.912q0 23.552-16.896 39.936t-40.448 16.384l-70.656 0 0-123.904 44.032 0q11.264 0 19.456-8.192t8.192-20.48q0-11.264-8.192-19.456t-19.456-8.192l-44.032 0 0-79.872 44.032 0q11.264 0 19.456-8.192t8.192-19.456-8.192-19.968-19.456-8.704l-44.032 0 0-72.704 44.032 0q11.264 0 19.456-8.192t8.192-20.48q0-11.264-8.192-19.456t-19.456-8.192l-44.032 0 0-86.016q0-57.344-26.624-80.896t-90.112-23.552l-394.24 0 0-9.216q0-23.552 16.896-39.936t40.448-16.384l486.4 0zM692.224 184.32q39.936 0 57.856 23.04t17.92 59.904l0 565.248q0 23.552-19.456 43.52t-48.128 19.968l-572.416 0q-24.576 0-44.032-20.48t-19.456-48.128l0-575.488q0-29.696 16.384-48.64t43.008-18.944l568.32 0zM703.488 291.84q0-17.408-10.752-30.208t-34.304-12.8l-488.448 0q-4.096 0-11.264 1.536t-14.336 5.12-12.288 9.728-5.12 15.36l0 274.432q8.192 9.216 23.04 22.016t34.816 23.552 44.544 18.432 53.248 7.68q43.008 0 75.264-13.824t59.904-34.816 54.272-45.056 58.88-45.568 73.728-36.352 98.816-16.896l0-142.336z" p-id="2414"></path></svg></div><a style={{ color: 'black' }}>图文</a></li>
                <li className={classNames('listUnit', { active: active == '引导' })} onClick={() => { this.subjectChange(this.state.childMenu[3].id, '引导') }}><div className='i'><svg t="1568954312475" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2652" width="200" height="200"><path d="M620.088889 620.088889L455.111111 967.111111l347.022222-164.977778L967.111111 455.111111l-347.022222 164.977778z m-73.955556 256l113.777778-216.177778 102.4 102.4-216.177778 113.777778z" fill="#333333" p-id="2653"></path><path d="M113.777778 113.777778h682.666666v341.333333h56.888889V56.888889H56.888889v910.222222h341.333333v-56.888889H113.777778z" fill="#333333" p-id="2654"></path><path d="M170.666667 227.555556h341.333333v56.888888H170.666667zM170.666667 568.888889h341.333333v56.888889H170.666667zM170.666667 398.222222h512v56.888889H170.666667z" fill="#333333" p-id="2655"></path></svg></div><a style={{ color: 'black' }}>引导</a></li>
                <li className={classNames('listUnit', { active: active == '布局' })} onClick={() => { this.subjectChange(this.state.childMenu[4].id, '布局') }}><div className='i'> <svg t="1568947761470" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2038" width="200" height="200"><path d="M781.69183326 208.63562012H242.36749291c-9.3092649 0-17.22930884 3.30743408-23.84417772 9.86792016-6.57531762 6.62475562-9.87780761 14.54479957-9.87780761 23.85406446v101.12640405h606.74853539V242.36254883c0-9.3092649-3.30743408-17.22930884-9.87780761-23.85406518-6.62475562-6.56048608-14.54479957-9.86792016-23.84417701-9.86791944h0.01977491z m33.70220971 573.04632568V410.87854004H444.59063721v404.50561547h337.08142114c9.29937744 0 17.22436547-3.30743408 23.844177-9.87780762 6.57531762-6.60992408 9.87780761-14.54479957 9.87780762-23.84417772v0.01977563z m-438.20782447 33.70220971v-404.50561548h-168.53576684v370.80340577c0 9.31420898 3.30249 17.26391602 9.87286353 23.82934546 6.61486816 6.61981225 14.53491211 9.89263916 23.84417772 9.89263917h134.81872559v-0.01977492zM242.34771729 141.21142578h539.32434106c27.89318824 0 51.74725342 9.87780761 71.50286865 29.62353539 19.74572778 19.75561523 29.61364722 43.58001733 29.61364722 71.48803711v539.33917189c0 27.89318824-9.86792016 51.73736596-29.61364722 71.4929812-19.75561523 19.75561523-43.60968041 29.63342286-71.50286865 29.63342285H242.34771729c-27.91296386 0-51.74725342-9.87780761-71.50286866-29.63342285C151.08923339 833.39953614 141.21142578 809.55041503 141.21142578 781.66217017V242.32794165C141.21142578 214.41497779 151.08923339 190.59057641 170.84484863 170.83496117 190.60046386 151.08923339 214.43475342 141.21142578 242.34771729 141.21142578z" p-id="2039"></path></svg></div><a style={{ color: 'black' }}>布局</a></li>
                <li className={classNames('listUnit', { active: active == '专题' })} onClick={() => { this.subjectChange(this.state.childMenu[5].id, '专题') }}><div className='i'><svg t="1568964989948" className="icon" viewBox="0 0 1053 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4238" width="200" height="200"><path d="M488.2176 225.024v231.38816H13.5168V270.66368c0-29.2352 23.1168-52.61824 52.08064-52.61824h216.33536c-58.0864-12.29824-101.68832-37.43744-103.2704-83.8144C177.03424 79.52896 238.01856-8.81664 327.12192 11.3664c91.9552 20.92544 156.19584 92.8768 205.38368 154.48576 49.664-62.89408 120.01792-143.83616 216.02304-156.6208 80.2048-10.21952 146.50368 70.72768 137.97376 124.13952-7.3216 46.80704-51.6608 72.31488-108.27264 84.61824h213.59616c28.96384 0 52.08576 23.42912 52.08576 52.61824v185.69216h-474.752l-0.9984-233.83552M336.91648 59.83232c-44.3904-17.73568-70.40512 1.28-89.10336 32.48128-10.1632 17.62816-21.12 41.1136-4.89472 58.3168 42.70592 44.41088 159.82592 41.1136 238.40256 32.85504-37.02272-46.75584-82.57536-99.00032-144.40448-123.65312z m485.28384 90.48064c30.49472-39.46496-29.28128-121.69216-93.52704-91.27936-61.45536 29.184-105.79456 76.84608-143.9744 123.70944 32.91136 2.92864 66.24256 3.67616 99.26144 2.0736 40.23808-1.70496 114.70336-4.52608 138.24-34.5088z m-330.71616 861.6448H104.57088c-26.0096 0-47.18592-21.2992-47.18592-48.03584v-470.0672h434.1504v518.10304h-0.0512z m508.50816-48.09216c0 26.73152-21.12 48.03584-47.18592 48.03584h-386.85696V493.7984h434.04288v470.0672z" fill="#272636" p-id="4239"></path></svg></div><a style={{ color: 'black' }}>专题</a></li>

              </ul>
            </div>
            <Spin spinning={spinning}>
              <div style={{ overflowY: 'auto', height: 1500, overflowX: 'hidden' }} className='li-box' id='style'>
                <ul style={{ paddingLeft: 0, marginLeft: 0 }}>
                  {styleLibrary.map((item, index) => {
                    let temObj = {}
                    temObj.__html = item.html

                    return <li onClick={() => {
                      let ue = window.UE.getEditor('content');
                      ue.focus();
                      ue.execCommand('insertHtml', item.html + '<p></p>');
                      localStorage.removeItem('moc_id')
                    }} className="pre_html" style={{ position: 'relative', display: 'block', padding: '10px', background: '#fff', borderBottom: '1px dotted #ddd', cursor: 'pointer', maxWidth: '100%' }} onMouseEnter={() => {

                    }}>
                      <div dangerouslySetInnerHTML={temObj} />
                    </li>;
                  })}
                </ul>
              </div>
            </Spin >
          </TabPane>
          : ''}
        {this.state.config_json.yqSwitch && window.ZXJS ?
          <TabPane tab="舆情数据库" key="8" forceRender={true}>
            <div className="yqMain">
              <div id="yqdom"></div>
            </div>
          </TabPane>
          : ''}
        <TabPane tab="爬虫库" key="9">
          <LeftCrawler />
        </TabPane>

        {this.state.config_json.mocSwitch ?
        <TabPane tab='任务' key="10">
          <div className="pushData">
            {this.state.mocData.length > 0 ?
              <div className="pushData">
                {this.state.mocData.map((item) => {
                  return (
                    <div className="item" >
                      <img className="i-img" src={img} />
                      <div className="push-title">{item.content.title}</div>
                      <div className="bg">
                        <span>{item.create_time}</span>
                      </div>

                        <div className="action">
                          <Button size="small" className="mr10" onClick={() => {
                            let data = {}
                            data.type = 1;
                            data.information_title = item.content.title;
                            // item.href = item.url;
                            data.resource = item.content.username;
                            data.content = item.content.content;
                            data.keyword = item.content.keyword || '';
                            data.mType = 'information';

                          // delete data.url;
                          window.PubSub.publish('setFileFabu', data)
                          if(item.content.coding&&item.content.coding!=''){
                             this.setState({
                            moc_id:item.content.coding
                          })
                          localStorage.setItem('moc_id',item.content.coding)
                          }else{
                            localStorage.removeItem('moc_id')
                          }

                        }}>使用</Button>
                      </div>
                    </div>
                  )
                })}
                <div>
                <Button style={{ marginLeft: '10px' }} onClick={() => {
                  let { mocPage } = this.state
                  if (mocPage.index == 1) {
                    message.error('已经是第一页');
                    return;
                  }
                  mocPage.index = mocPage.index - 1;
                  this.setState({
                    mocPage
                  }, () => { this.getMocData() })

                }}>上一页</Button>
                <Button style={{ marginLeft: '20px' }} onClick={() => {
                  let { mocPage,last_page } = this.state
                  if(mocPage.index == last_page){
                    message.error('已经是最后一页')
                    return;
                  }
                  mocPage.index = mocPage.index + 1;
                  this.setState({
                    mocPage
                  }, () => { this.getMocData() })
                }}>下一页</Button>
                </div>
              </div>
              : <div className="note"> 暂无数据</div>}
          </div>
        </TabPane>
        : ''}

      </Tabs>
    )
  }
}
